
<template>
  <div>
    <van-nav-bar title="我的收益" left-text="返回" left-arrow @click-left="onClickLeft" />
  </div>
  <div class="upload-container">
    <van-uploader v-model="fileList1" :max-count="1" :after-read="uploadIdCardFront" :preview-size="[330, 150]"></van-uploader>

    <p style="text-align: center; margin-top: 10px; font-size: 14px; color: #666">请上传身份证正面</p>

    <van-uploader v-model="fileList2" :max-count="1" :after-read="uploadIdCardBack" :preview-size="[330, 150]"></van-uploader>

    <p style="text-align: center; margin-top: 10px; font-size: 14px; color: #666">请上传身份证反面</p>
    <van-button type="primary" size="large" class="submit-btn" @click="Submit()">
      提交认证
    </van-button>
  </div>
</template>
<script setup>
import {ref} from 'vue';
import {UploadImg} from "@/api/oss";
import {UserAuthSubmit} from "@/api/user";
import {showToast} from "vant";

const onClickLeft = () => history.back();

const fileList1 = ref([]);
const fileList2 = ref([]);


const userIdUrl = ref({
  idCardFront: '',
  idCardBack: ''
});  // 用户id
function uploadIdCardFront(file) {
  // 可以在这里进行图片预览或其他操作
  const formData = new FormData();
  formData.append('file', file.file);
  UploadImg(formData).then(res => {
    console.log(res.data);
    if (res.data.code === 200000) {
      userIdUrl.value.idCardFront = res.data.data.fileUrl
    } else {
      showToast(res.data.message);
    }

  }).catch(() => {
    showToast('上传失败');
  });
}
function uploadIdCardBack(file) {
  const formData = new FormData();
  formData.append('file', file.file);
  UploadImg(formData).then(res => {
    console.log(res.data);
    if (res.data.code === 200000) {
      userIdUrl.value.idCardBack = res.data.data.fileUrl
    } else {
      showToast(res.data.message);
    }

  }).catch(() => {
    showToast('上传失败');
  });
}
function Submit() {
  console.log(userIdUrl.value);
  UserAuthSubmit(userIdUrl.value).then(res => {
    console.log(res.data);
    if (res.data.code === 200000) {
      showToast('提交认证成功，请等待审核！');
      onClickLeft();
    } else {
      showToast(res.data.message);
    }
  }).catch(() => {
    showToast('提交认证失败');
  });
}
</script>
<style scoped>
.upload-container {
  padding: 20px;
}
</style>
